import React from 'react';
import { 
  StyleSheet,
  Image,
  Text,
  TouchableOpacity,
  TextInput,
  View,
  Alert,
  DeviceEventEmitter
} from 'react-native';
import { inject, observer } from 'mobx-react';
import Toast from 'react-native-root-toast';

@inject((stores) => {
    return {
      myStore: stores.rootStore.myStore
    }
  })
@observer class ResetPswScreen extends React.Component {
    static navigationOptions = {
        title: '重置密码',
        headerBackTitle: '返回',
        
    };
    constructor(props){
		super(props);
        this.state = { 
            old_login_pwd:'',
            new_login_pwd:'',
            retry_new_login_pwd:''
        } 
	}
    componentWillUnmount() {
        DeviceEventEmitter.emit('My', {id: 1});
	};
    /**
     * 重置新密码
     */
    _onConfirm = () => {
        if(this.state.old_login_pwd === '' || this.state.new_login_pwd === '' || this.state.retry_new_login_pwd === ''){
            Alert.alert(
                '保存失败',
                '旧密码,新密码,重复新密码不能为空',
                [
                  { text: '关闭' }
                ],
                { cancelable: false }
              )
            return;
        }
        this.props.myStore.changePassword({
            old_login_pwd: this.state.old_login_pwd,
            new_login_pwd: this.state.new_login_pwd,
            retry_new_login_pwd: this.state.retry_new_login_pwd
        }, () => {
            Toast.show('修改成功',{
                duration: Toast.durations.LONG,
                position: Toast.positions.CENTER,
                shadow: true,
                animation: true,
                hideOnPress: true,
                delay: 10
            });
            this.props.navigation.navigate('Login');
        })
    }
    render() {
        const { navigate } = this.props.navigation;  //获取navigation的navigate方法
        return (
            <View style={styles.container}> 
                <View style={styles.titleTxt}>
                    <Text style={styles.c1}>*</Text>
                    <Text style={styles.titleC2}>密码修改</Text>
                </View>
                <View style={styles.formBox}>
                    <View style={[styles.formItem,styles.formUserItem]}>
                        <View style={styles.formLabel}> 
                            <Text>旧密码</Text>
                        </View>
                        <TextInput
                            style={styles.formUser}
                            placeholder='请输入密码'
                            onChangeText={(text) => this.setState({old_login_pwd: text})}
                            value={this.state.old_login_pwd}
                            secureTextEntry={true}
                        />
                    </View>
                    <View style={[styles.formItem,styles.formUserItem]}>
                        <View style={styles.formLabel}> 
                            <Text>新密码</Text>
                        </View>
                        <TextInput
                            style={styles.formUser}
                            placeholder='密码必须是字符加数字以及特殊字符'
                            onChangeText={(text) => this.setState({new_login_pwd: text})}
                            value={this.state.new_login_pwd}
                            secureTextEntry={true}
                        />
                    </View>
                    <View style={[styles.formItem,styles.formPswItem]}> 
                        <View style={styles.formLabel}> 
                            <Text>重复新密码</Text>
                        </View>
                        <TextInput
                            style={styles.formPsw}
                            placeholder='两次密码必须输入一致'
                            onChangeText={(text) => this.setState({retry_new_login_pwd: text})}
                            value={this.state.retry_new_login_pwd}
                            secureTextEntry={true}
                        /> 
                    </View>
                    <TouchableOpacity onPress={this._onConfirm}>
                        <View style={styles.btnLogin}><Text style={styles.btnTxt}>确定</Text></View>
                    </TouchableOpacity>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({ 
    titleTxt:{
        marginTop: 10,
        marginBottom: 15,
        display:'flex',
        flexDirection:'row',
        alignItems:'center',
        paddingLeft: 17,
        position: 'relative',
    },
    c1:{ 
        color:'#FF7F4B',
        fontSize: 34,
        position: 'absolute',
        top: '50%',
        marginTop:-14
    },
    titleC2:{ 
        fontSize: 14,
        alignItems:'center'
    },
    formBox:{
        paddingLeft: 10,
        paddingRight: 10,
    },
    formItem:{
        borderBottomColor:'#cccccc',
        borderBottomWidth: 1,
        height:48,
        width: '100%',
        display:'flex',
        justifyContent:'space-between',
        flexDirection:'row', 
        paddingLeft: 125
    },
    formPswItem:{
        paddingRight: 45
    },
    formLabel:{
        color:'#111111',
        fontSize: 16,
        lineHeight: 45,
        width: 125,
        marginLeft: -125,
        textAlign:'left',
        display:'flex',
        flexDirection:'row',
        justifyContent:'flex-start',
        alignItems: 'center',
    },
    formCodeItem:{
        paddingRight: 80
    },
    formUser:{
        width: '100%'
    },
    formPsw:{
        width: '100%'
    },
    formCode:{
        width: '100%'
    },
    formIcon:{
        width:45,
        lineHeight: 45,
        fontSize: 16,
        textAlign:'right'
    },
    getCode:{
        fontSize: 14,
        color:'#FF7F4B',
        lineHeight: 45
    },
    btnLogin:{
        width: 350,
        height: 40,
        backgroundColor:'#FF7F4B',
        borderRadius: 8,
        marginTop: 20,
        marginLeft:'auto',
        marginRight:'auto'
    },
    btnTxt:{
        color:'#FFFFFF',
        fontSize: 16,
        textAlign:'center',
        lineHeight: 40,
    },
    labelIco:{
        marginRight:5,
        color:'#FF7F4B',
        fontSize:15
    }
});
export default ResetPswScreen;